<%--
  Created by IntelliJ IDEA.
  User: LLg
  Date: 2022/11/7
  Time: 8:43
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/layui/css/layui.css" media="all">
</head>
<body>
<%--    <table class="layui-hide" id="test"></table>--%>
<form class="layui-form" action="">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">真实姓名：</label>
            <div class="layui-input-block">
                <input type="text" class="layui-input" name="realName" id="realName" autocomplete="off">
            </div>
        </div>

        <div class="layui-inline">
            <label class="layui-form-label">角色：</label>
            <div class="layui-input-block">
                <select name="roleId" lay-filter="aihao">
                    <option value=""></option>
                    <option value="1">管理系统员</option>
                    <option value="2">店长</option>
                    <option value="3">店员</option>
                </select>
            </div>
        </div>

        <div class="layui-inline">
            <div class="layui-input-block">
                <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">搜索</button>
            </div>
        </div>
    </div>
    <table class="layui-hide" id="test" lay-filter="test"></table>
    <script type="text/html" id="toolbarDemo">
        <div class="layui-btn-container">
            <button class="layui-btn layui-btn-sm" lay-event="AddSupplier">新增</button>
        </div>
    </script>
    <div>
        <span id="supCode"></span><br>
        <span id="supName"></span><br>
        <span id="supDesc"></span><br>
        <span id="supContact"></span><br>
        <span id="supPhone"></span><br>
        <span id="supAddress"></span><br>
        <span id="supFax"></span>
    </div>
    <div>
        <script type="text/html" id="barDemo">
            <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="viewSupplier">查看</a>
            <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="view2">查看2</a>
            <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
        </script>
    </div>
</form>
</div>
<script src="${pageContext.request.contextPath}/static/layui/layui.js" charset="utf-8"></script>
<script>
    layui.use(['table', 'form', 'jquery'], function () {
        var table = layui.table;
        var form = layui.form;
        var $ = layui.$;
        var tableIns = table.render({
            elem: '#test'
            , url: 'list'
            , toolbar: '#toolbarDemo'
            , cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            , cols: [[
                {field: 'id', width: 80, title: 'ID', sort: true}
                , {field: 'supCode', width: 180, title: '供货商编号', sort: true}
                , {field: 'supName', width: 180, title: '供货商'}
                , {field: 'supDesc', width: 180, title: '供货商描述'}
                , {field: 'supContact', title: '供货商联系人', width: 180} //minWidth：局部定义当前单元格的最小宽度，layui 2.2.1 新增
                , {field: 'supPhone', title: '联系电话'}
                , {field: 'supAddress', title: '供货商地址'}
                , {field: 'supFax', title: '传真'}
                , {fixed: 'right', title: '操作', toolbar: '#barDemo', width: 250}
            ]]
            , page: true
        });

        //监听提交
        form.on('submit(demo1)', function (data) {
            console.log(data.field)
            //这里以搜索为例
            tableIns.reload({
                where: { //设定异步数据接口的额外参数，任意设
                    supName: data.field.supName
                    //…
                }
                , page: {
                    curr: 1 //重新从第 1 页开始
                }
            });
            return false;
        });

        // 工具栏事件
        table.on('toolbar(test)', function (obj) {
            switch (obj.event) {
                case 'AddSupplier':
                    window.open('toaddSupplier')
                    break;
            }
        });


        //监听工具事件
        table.on('tool(test)', function (obj) {
            var data = obj.data;
            //console.log(obj)
            if (obj.event === 'del') {
                layer.confirm('真的删除行么', function (index) {
                    $.get("supplierDelete/" + data.id, function (data2) {
                        if (data2 === "1") {
                            location.reload();
                        } else {
                            alert('删除失败')
                        }
                    })
                    layer.close(index);
                });
            } else if (obj.event === 'viewSupplier') {
                window.open("viewSupplier/" + data.id)
            }else if (obj.event === 'edit'){
                window.open("toSupplierUpdate/"+data.id);
            }else if (obj.event == "view2"){
                $.get("${pageContext.request.contextPath}/view2"+data.id,function (data){
                    $("#supCode").text("供货商编号:"+data.supCode)
                    $("#supName").text("供货商编号:"+data.supName)
                    $("#supContact").text("供货商编号:"+data.supContact)
                    $("#supPhone").text("供货商编号:"+data.supPhone)
                    $("#supAddress").text("供货商编号:"+data.supAddress)
                    $("#supFax").text("供货商编号:"+data.supFax)
                })
            }
        });
    });
</script>
</body>
</html>
